使用YouTube Player API

今天來整理使用YouTube Player API建立video元件

let can;
function setup() {
	can = createCanvas(650, 400);
	can.id("can1");
	can.class("c1");
	can.position(0, 0);
	can.hide();
	background(0);

	loadPlayerApi();
}

//-- 1. 建立div元件，之後iframe及video player會建立在id為player的div的位置
//-- 2. 載入IFrame Player API.
function loadPlayerApi() {
	let div = createDiv('');
	div.id("player");
	div.position(0, 0);

	var tag = document.createElement('script');
	tag.src = "https://www.youtube.com/iframe_api";
	var firstScriptTag = document.getElementsByTagName('script')[0];
	firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); //-- 將IFrame Player API的script置於原有的script的前面。
}

//-- 3. 建立<iframe>以及YouTube player
//-- https://www.youtube.com/watch?v=fvIsHxuZbMw, 其中 videoId 為 fvIsHxuZbMw
var player;
function onYouTubeIframeAPIReady() {
	player = new YT.Player('player', {
		height: '390',
		width: '640',
		videoId: 'fvIsHxuZbMw',  //-- 這是youtube的影片id, 
		playerVars: {
			'playsinline': 1
		},
		events: {
			'onReady': onPlayerReady,
			'onStateChange': onPlayerStateChange
		}
	});
}

// 4. 回報video player建立完成.
function onPlayerReady(event) {
	//event.target.playVideo();
	playVideo();
}

function playVideo() {
	player.loadVideoById({
		height: '390',
		width: '640',
		videoId: 'fvIsHxuZbMw',  //-- 這是youtube的影片id, 
		startSeconds: '5',
		endSeconds: '15',
		suggestedQuality: 'large'
	});
}

//-- 5. 當player的狀態改變時，觸發onPlayerStateChange()事件，正在播放中的狀態是1，
//--    以下程式碼是當影片正在播放時，設定6秒後停止播放。
var done = false;
function onPlayerStateChange(event) {
	if (event.data == YT.PlayerState.PLAYING && !done) {
		//setTimeout(stopVideo, 6000);
		done = true;
	}
}

//-- player的狀態代碼
/*
-1 – unstarted 尚未播放
0 – ended 播放結束
1 – playing 正在播放中
2 – paused 暫停中
3 – buffering 影片緩衝中
5 – video cued 播片跳至播放時間點
*/

function stopVideo() {
	player.stopVideo();
}

function draw() {

}

整個YouTube iFrame Player的執行流程
loadPlayerApi() -> onYouTubeIframeAPIReady() -> onPlayerReady(event)
onPlayerStateChange(event) -> stopVideo()

利用player.loadVideoById()來播放影片，同時可以設定開始播放時間點startSeconds及結束播放時間點endSeconds，單位是秒

player.loadVideoById({
    height: '390',
    width: '640',
    videoId: 'fvIsHxuZbMw',  //-- 這是youtube的影片id, 
    startSeconds: '5',
    endSeconds: '15',
    suggestedQuality: 'large'
});

這是程式碼產生的iframe元件，作為youtube iframe player

<iframe id="player" style="position: absolute; left: 0px; top: 0px;" frameborder="0" allowfullscreen="1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" title="10H Ghibli Piano No Ads" width="640" height="390" src="https://www.youtube.com/embed/fvIsHxuZbMw?playsinline=1&enablejsapi=1&origin=http%3A%2F%2F127.0.0.1%3A5500&widgetid=1"></iframe>

這是影片播放的來源路徑
https://www.youtube.com/embed/fvIsHxuZbMw?playsinline=1&enablejsapi=1&origin=http%3A%2F%2F127.0.0.1%3A5500&widgetid=1

網址的參數
https://www.youtube.com/embed/fvIsHxuZbMw (videoId:fvIsHxuZbMw)
playsinline=1
enablejsapi=1
origin=http://127.0.0.1:5500
widgetid=1

接著是 YouTube iFrame Player的一些操作指令功能

player.getDuration();  //-- 取得影片的播放總時間
player.getVideoUrl();  //-- 取得影片網址連結
player.getVideoEmbedCode();  //-- 取得iframe的元件DOM
player.getCurrentTime();  //-- 取得影片的目前的播放時間點
player.getPlayerState();  //-- 取得影片播放狀態
player.getPlaybackRate();  //-- 取得影片播放倍速
player.setVolume(50);  //-- 設定影片播放音量 0 ~ 100
player.setSize(640, 390);  //-- 設定影片尺寸
player.mute();          //-- 設定影片靜音
player.setLoop(false);  //-- 設定影片循環播放

參考資料
YouTube Player API
https://developers.google.com/youtube/iframe_api_reference

//-- 補充 ---
//-- 同時建立多個視訊來源

let can;
let capture1;
let capture2;
function setup() {
	can = createCanvas(640, 240);
	can.id("can1");
	can.class("c1");
	can.position(0, 0);
	background(0);
	navigator.mediaDevices.enumerateDevices().then((devices) => {
		console.log(devices); 

		let device_name1 = "OBS Virtual Camera";
		let device_name2 = "USB CAMERA";
		devices.find((dev) =>{
			if(dev.label.indexOf(device_name1) != -1 && dev.kind=='videoinput'){
				console.log(dev.deviceId + ", " + dev.kind + ", " + dev.label);
				let constraints = {
					audio: false,
					video: {
						deviceId: dev.deviceId
					}
				};
				capture1 = createCapture(constraints, (stream) => {
					capture1.hide();
				});
			} else 
			if(dev.label.windexOf(device_name2) != -1 && dev.kind=='videoinput'){
				console.log(dev.deviceId + ", " + dev.kind + ", " + dev.label);
				let constraints = {
					audio: false,
					video: {
						deviceId: dev.deviceId
					}
				};
				capture2 = createCapture(constraints, (stream) => {
					capture2.hide();
				});
			}

		});
	});
}

function draw() {
  if(capture1!=undefined){
	image(capture1, 0, 0, 320, 240);
  }
  if(capture2!=undefined){
	image(capture2, 320, 0, 320, 240);
  }
}